<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线OJ-题目列表</title>
    <style>
        /* ========== 零改动美化版 ========== */
        :root {
            --theme: #00c6ff;
            --theme2: #0072ff;
            --bg: #f5f9fc;
            --card: #ffffff;
            --text: #222;
            --light: #8899aa;
            --shadow: 0 4px 20px rgba(0, 0, 0, .08);
            --radius: 12px;
            --trans: .3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        }

        body {
            background: var(--bg);
            color: var(--text);
        }

        /* 导航栏 */
        .container .navbar {
            height: 60px;
            background: linear-gradient(90deg, var(--theme), var(--theme2));
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            padding: 0 40px;
        }

        .container .navbar a {
            display: inline-block;
            line-height: 60px;
            padding: 0 20px;
            color: #fff;
            font-size: 16px;
            text-decoration: none;
            transition: var(--trans);
        }

        .container .navbar a:hover {
            background: rgba(255, 255, 255, .15);
        }

        .container .navbar .login {
            margin-left: auto;
        }

        /* 主体列表区 */
        .container .question_list {
            width: 90%;
            max-width: 1000px;
            margin: 60px auto 80px;
            background: var(--card);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 40px 50px 60px;
            text-align: center;
        }

        .container .question_list h1 {
            color: var(--theme2);
            font-size: 32px;
            margin-bottom: 30px;
            letter-spacing: 1px;
        }

        .container .question_list table {
            width: 100%;
            border-collapse: collapse;
            font-size: 16px;
            margin-top: 20px;
        }

        th.item {
            background: linear-gradient(90deg, var(--theme), var(--theme2));
            color: #fff;
            height: 50px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        td.item {
            height: 48px;
            border-bottom: 1px solid #eef2f6;
            transition: var(--trans);
        }

        tbody tr:hover td {
            background: #f8fbff;
        }

        td.item a {
            color: var(--text);
            text-decoration: none;
            font-weight: 500;
            transition: var(--trans);
        }

        td.item a:hover {
            color: var(--theme2);
            text-decoration: underline;
        }

        /* footer */
        .container .footer {
            text-align: center;
            font-size: 14px;
            color: var(--light);
            margin-top: 40px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 导航栏， 功能不实现-->
        <div class="navbar">
            <a href="/">首页</a>
            <a href="/all_questions">题库</a>
            <a href="#">竞赛</a>
            <a href="#">讨论</a>
            <a href="#">求职</a>
            <a class="login" href="#">登录</a>
        </div>
        <div class="question_list">
            <h1>OnlineJuge题目列表</h1>
            <table>
                <tr>
                    <th class="item">编号</th>
                    <th class="item">标题</th>
                    <th class="item">难度</th>
                </tr>
                {{#question_list}}
                <tr>
                    <td class="item">{{number}}</td>
                    <td class="item"><a href="/question/{{number}}">{{title}}</a></td>
                    <td class="item">{{star}}</td>
                </tr>
                {{/question_list}}
            </table>
        </div>
        <div class="footer">
            <h4>@tgw</h4>
        </div>
    </div>

</body>

</html>